<template>
  <div class="app-container">
    <div class="search-container">
      <div class="search-wrap">
        <div style="display:inline-block;">
          <label class="radio-label" style="padding-left:0;">网络模式:</label>
          <el-select v-model="optVal" placeholder="请选择">
            <el-option label="全部" value="0" />
            <el-option label="静态网络" value="1" />
            <el-option label="动态网络" value="2" />
          </el-select>
        </div>

        <div style="display:inline-block;">
          <label class="radio-label">网关:</label>
          <el-input v-model="fieldName" placeholder style="width:240px;" />
        </div>
        <el-button
          :loading="downloadLoading"
          style="margin:0 0 20px 20px;"
          type="primary"
          icon="el-icon-search"
        >搜索</el-button>
        <el-button
          :loading="downloadLoading"
          style="margin:0 0 20px 20px;"
          type="info"
          icon="el-icon-refresh-right"
        >重置</el-button>
      </div>

      <div class="btn-wrap radio-label">
        <el-button
          :loading="downloadLoading"
          style="margin:0 0 20px 20px;"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="openDialog()"
        >新增</el-button>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading..."
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div>
            <div class="desc-item">
              <div class="title">网关配置</div>

              <table class="el-descriptions__table">
                <tbody>
                  <tr class="el-descriptions-row">
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">外网网口</span>
                        <span class="el-descriptions-item__content">eth0</span>
                      </div>
                    </td>
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">外网网口</span>
                        <span class="el-descriptions-item__content">eth1</span>
                      </div>
                    </td>
                  </tr>
                  <tr class="el-descriptions-row">
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">网关</span>
                        <span class="el-descriptions-item__content">192.168.1.1</span>
                      </div>
                    </td>
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">掩码</span>
                        <span class="el-descriptions-item__content">255.255.255.0</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="desc-item">
              <div class="title">动态网络配置</div>

              <table class="el-descriptions__table">
                <tbody>
                  <tr class="el-descriptions-row">
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">网络模式</span>
                        <span class="el-descriptions-item__content">动态网络</span>
                      </div>
                    </td>
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">分配IP数量</span>
                        <span class="el-descriptions-item__content">1000</span>
                      </div>
                    </td>
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">主机隔离</span>
                        <span class="el-descriptions-item__content">
                          <el-tag type="danger" size="mini">否</el-tag>
                        </span>
                      </div>
                    </td>
                  </tr>
                  <tr class="el-descriptions-row">
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">真实网络</span>
                        <span class="el-descriptions-item__content">192.168.1.0/24</span>
                      </div>
                    </td>
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">动态网络</span>
                        <span class="el-descriptions-item__content">192.168.40.0/24</span>
                      </div>
                    </td>
                    <td colspan="1" class="el-descriptions-item el-descriptions-item__cell">
                      <div class="el-descriptions-item__container">
                        <span class="el-descriptions-item__label has-colon">服务网络</span>
                        <span class="el-descriptions-item__content">192.168.100.0/24</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="编号" width="95">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="网络模式">
        <template slot-scope="scope">{{ scope.row.mode }}</template>
      </el-table-column>
      <el-table-column label="网关">
        <template slot-scope="scope">{{ scope.row.gateway }}</template>
      </el-table-column>
      <el-table-column label="掩码">
        <template slot-scope="scope">{{ scope.row.mask }}</template>
      </el-table-column>
      <el-table-column label="分配IP数量">
        <template slot-scope="scope">{{ scope.row.count }}</template>
      </el-table-column>
      <el-table-column label="主机隔离">
        <template slot-scope="scope">
          <el-tag type="danger">{{ scope.row.isolate }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '暂停'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-else type="success">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="350" align="center">
        <template slot-scope="{row}">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-s-operation"
            @click="dialogConfigVisible = true"
          >
            配置列表
          </el-button>

          <el-button type="warning" size="mini" icon="el-icon-edit" @click="openDialog()">修改</el-button>

          <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>

    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="新增动态网络" width="1200px" @dragDialog="handleDrag">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div class="form-title">网关配置</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="外网网口" prop="title">
              <el-select v-model="temp.outEth" class="filter-item" placeholder="Please select">
                <el-option v-for="item in ethOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内网网口" prop="title">
              <el-select v-model="temp.inEth" class="filter-item" placeholder="Please select">
                <el-option v-for="item in ethOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="网关" prop="title">
              <el-input value="192.168.1.1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="掩码" prop="title">
              <el-input value="255.255.255.0" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="form-title">动态网络配置</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="网络模式" prop="title">
              <el-select v-model="temp.netType" class="filter-item" size="medium" placeholder="Please select">
                <el-option v-for="item in netOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主机隔离" prop="title">
              <el-switch
                v-model="temp.isolate"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="真实网络" prop="title">
              <el-input value="192.168.1.0/24" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配IP数量" prop="title">
              <el-input value="10" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="动态网络" prop="title">
              <el-input value="172.10.10.0/24" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务网络" prop="title">
              <el-input value="172.10.35.0/24" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="form-title">
              <span>伪装服务配置</span>
              <el-button style="margin-left: 30px;" type="primary" size="mini">添加伪装服务</el-button>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table v-loading="listLoading" :data="formList" element-loading-text="Loading..." fit highlight-current-row>
              <el-table-column align="center" label="编号" width="95">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="网口" width="80px">
                <template slot-scope="scope">
                  {{ scope.row.interFace }}
                </template>
              </el-table-column>
              <el-table-column label="网络类型" width="120px">
                <template slot-scope="scope">
                  {{ scope.row.type }}
                </template>
              </el-table-column>
              <el-table-column label="真实IP">
                <template slot-scope="scope">
                  {{ scope.row.zsip }}
                </template>
              </el-table-column>
              <el-table-column label="动态IP">
                <template slot-scope="scope">
                  {{ scope.row.dip }}
                </template>
              </el-table-column>
              <el-table-column label="服务IP">
                <template slot-scope="scope">
                  {{ scope.row.sip }}
                </template>
              </el-table-column>
              <el-table-column label="伪装服务">
                <template slot-scope="scope">
                  {{ scope.row.server }}
                </template>
              </el-table-column>
              <el-table-column label="伪装指纹">
                <template slot-scope="scope">
                  {{ scope.row.finger }}
                </template>
              </el-table-column>
              <el-table-column label="蜜罐">
                <template slot-scope="scope">
                  {{ scope.row.honeypot }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150" align="center">
                <template slot-scope="{row}">
                  <el-button
                    type="warning"
                    size="mini"
                  >
                    修改
                  </el-button>

                  <el-button
                    type="danger"
                    size="mini"
                  >
                    删除
                  </el-button>
                </template>

              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogTableVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :visible.sync="dialogConfigVisible" title="配置服务" width="1200px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div class="form-title">网关配置</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="网络模式" prop="title">
              静态网络
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="网关" prop="title">
              192.168.10.1
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="掩码" prop="title">
              255.255.255.0
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="form-title">
              <span>伪装服务配置</span>
              <el-button style="margin-left: 30px;" type="primary" size="mini">选择伪装服务</el-button>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table v-loading="listLoading" :data="formList" element-loading-text="Loading..." fit highlight-current-row>
              <el-table-column align="center" label="编号" width="95">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="网口">
                <template slot-scope="scope">
                  {{ scope.row.interFace }}
                </template>
              </el-table-column>
              <el-table-column label="网络类型">
                <template slot-scope="scope">
                  {{ scope.row.type }}
                </template>
              </el-table-column>
              <el-table-column label="真实IP">
                <template slot-scope="scope">
                  {{ scope.row.zsip }}
                </template>
              </el-table-column>
              <el-table-column label="动态IP">
                <template slot-scope="scope">
                  {{ scope.row.dip }}
                </template>
              </el-table-column>
              <el-table-column label="服务IP">
                <template slot-scope="scope">
                  {{ scope.row.sip }}
                </template>
              </el-table-column>
              <el-table-column label="蜜罐服务">
                <template slot-scope="scope">
                  {{ scope.row.server }}
                </template>
              </el-table-column>
              <el-table-column label="伪装指纹">
                <template slot-scope="scope">
                  {{ scope.row.finger }}
                </template>
              </el-table-column>
              <el-table-column label="伪装蜜罐">
                <template slot-scope="scope">
                  {{ scope.row.honeypot }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150" align="center">
                <template slot-scope="{row}">
                  <el-button
                    type="danger"
                    size="mini"
                  >
                    移除
                  </el-button>
                </template>

              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogConfigVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogConfigVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'

import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'Dynamic',
  components: { Pagination },
  directives: { elDragDialog },
  data() {
    return {
      optVal: '0',
      list: null,
      formList: [
        {
          interFace: 'eth0',
          type: '动态网络',
          zsip: '192.168.1.118',
          dip: '172.10.10.7',
          sip: '172.10.35.100',
          ip: '192.168.2.118',
          server: 'WEB',
          finger: 'Apache1.2.7',
          honeypot: 'Apacher蜜罐'
        },
        {
          interFace: 'eth1',
          type: '静态网络',
          zsip: '192.168.1.26',
          dip: '172.10.10.99',
          sip: '172.10.35.46',
          ip: '172.16.1.10',
          server: 'SSH',
          finger: '-',
          honeypot: 'SSH蜜罐'
        }
      ],
      fieldName: '',
      listLoading: true,
      downloadLoading: false,
      autoWidth: true,

      dialogTableVisible: false,
      dialogConfigVisible: false,

      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
        outEth: 'eth0',
        inEth: 'eth1',
        netType: '静态网络'
      },
      ethOptions: ['eth0', 'eth1', 'eth2'],
      netOptions: ['静态网络', '动态网络'],
      honeypotOptions: ['telnet蜜罐', 'SSH蜜罐', 'FTP蜜罐', 'DNS蜜罐', 'MAIL蜜罐', 'SMB蜜罐', 'SFTP蜜罐'],
      ipOptions: ['172.16.10.2', '172.16.10.3', '172.16.10.4', '172.16.10.5', '172.16.10.6', '172.16.10.7', '172.16.10.8', '172.16.10.9', '172.16.10.10']
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    openDialog() {
      this.dialogTableVisible = true
    },
    fetchData() {
      this.listLoading = true
      const data = []
      fetchList().then((response) => {
        data.push({
          mode: '静态网络',
          gateway: '192.168.1.1',
          mask: '255.255.255.0',
          count: '100',
          isolate: '否',
          status: '正常'
        })
        data.push({
          mode: '静态网络',
          gateway: '192.168.10.1',
          mask: '255.255.255.0',
          count: '17',
          isolate: '否',
          status: '正常'
        })
        data.push({
          mode: '动态网络',
          gateway: '172.168.11.1',
          mask: '255.255.255.0',
          count: '28',
          isolate: '否',
          status: '正常'
        })
        data.push({
          mode: '静态网络',
          gateway: '172.168.12.1',
          mask: '255.255.255.0',
          count: '33',
          isolate: '否',
          status: '正常'
        })
        data.push({
          mode: '动态网络',
          gateway: '192.168.15.1',
          mask: '255.255.255.0',
          count: '67',
          isolate: '否',
          status: '正常'
        })
        this.list = data
        this.listLoading = false
      })
    },
    handleDrag() {
      console.log('添加页面')
    }
  }
}
</script>

<style scoped>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.search-container {
  display: flex;
  justify-content: space-between;
}
.search-wrap {
  flex: 1;
}

.desc-item {
  margin-bottom: 20px;
}

.title {
  padding: 5px 0;
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  border-bottom: 1px solid #C8C8C8;
  box-sizing: border-box;
}

.el-descriptions__table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.el-descriptions__table  td {
  border-bottom: none !important;
}
.el-descriptions-item__label {
  margin-right: 10px;
}
.el-descriptions-item__label.has-colon:after {
  content: ":";
  position: relative;
  top: -0.5px;
}

.form-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #F1F1F1;
  box-sizing: border-box;
}
.el-select {
  width: 100%;
}
</style>
